BootstrapVue — Overlays

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add overlays to our app.

Overlay

We can use the b-overlay component to visually obscure a particular element or component and its content.

It’s available since BootstrapVue 2.7.0.

For example, we can create one by writing:

<template>  
  <div id="app">  
    <b-overlay :show="show">  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
    </b-overlay>  
    <b-button @click="show = !show">Toggle overlay</b-button>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      show: false  
    };  
  }  
};  
</script>

We have a b-card inside the b-overlay component.

b-overlay takes a show prop to let us set when to show the overlay.

When we click Toggle overlay, then we’ll toggle the overlay on and off as we toggle the show state between true and false .

When the overlay is shown, then we’ll see the card content covered in gray and a spinner in the middle.

Overlay Backdrop Color

We can change the backdrop color of an overlay.

For example, we change the opacity with the opacity prop:

<template>  
  <div id="app">  
    <b-overlay :show="show" opacity="0.5">  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
    </b-overlay>  
    <b-button @click="show = !show">Toggle overlay</b-button>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      show: false  
    };  
  }  
};  
</script>

We set opacity to 0.5, so we’ll see a translucent overlay.

Also, we can change how the background is blurred with the blur prop:

<template>  
  <div id="app">  
    <b-overlay :show="show" blur="2px">  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
    </b-overlay>  
    <b-button @click="show = !show">Toggle overlay</b-button>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      show: false  
    };  
  }  
};  
</script>

The value is specified in pixels.

Spinner Styling

We can change the spinner styling with various props.

The spinner-type prop lets us change the spinner type.

spinner-variant lets us change the color for the spinner.

spinner-small makes the spinner smaller if it’s set to true .

We can write:

<template>  
  <div id="app">  
    <b-overlay show spinner-variant="primary" spinner-type="grow" spinner-small>  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
    </b-overlay>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Now get a different spinner than the default.

We have a flashing dot.

primary makes the spinner blue.

spinner-small made it small.

Corner Rounding

We can round the corners of the overlay.

To do that, we can set the rounded prop.

The possible values are:

• true — default styling
• false — no rounding
• 'sm' — small rounded corners
• 'lg' — large rounded corners
• 'pill' — pill style rounded corners
• 'circle' — circular or oval rounding
• 'top' — rounding only the top 2 corners
• 'bottom' — touring only the bottom 2 corners
• 'left' — rounding only the 2 left corners
• 'right' — rounding only the 2 right corners

For example, we can write:

<template>  
  <div id="app">  
    <b-overlay rounded="circle" show>  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
    </b-overlay>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Since we set rounded to 'circle' , we’ll see an oval overlay.

Custom Overlay Content

We can customize the overlay’s content.

To do that, we populate the overlay slot.

For example, we write:

<template>  
  <div id="app">  
    <b-overlay show>  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
      <template v-slot:overlay>  
        <div>loading</div>  
      </template>  
    </b-overlay>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Then we see ‘loading’ on our overlay instead of a spinner.

Centering Overlay Content

The content of an overlay is centered by default.

To disable that, we can set the no-center prop to true :

<template>  
  <div id="app">  
    <b-overlay no-center show>  
      <b-card title="Card">  
        <b-card-text>foo</b-card-text>  
      </b-card>  
    </b-overlay>  
  </div>  
</template>  
<script>  
export default {  
  name: "App"  
};  
</script>

Now the spinner will be shown on the top left corner.

Conclusion

We can add overlays to obscure the content behind it.

The overlay can be customized to do what we want.